<!DOCTYPE html>
<html>
<head>
    <title>图片上传测试</title>
</head>
<body>
    <h1>图片上传测试</h1>
    <input type="file" id="imageInput" accept="image/*">
    <button onclick="uploadImage()">上传图片</button>
    <div id="result"></div>

    <script>
        async function uploadImage() {
            const fileInput = document.getElementById('imageInput');
            const file = fileInput.files[0];
            
            if (!file) {
                alert('请选择图片');
                return;
            }

            const formData = new FormData();
            formData.append('image', file);

            try {
                const response = await fetch('http://localhost:8000/api/issue_images/', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Authorization': `Bearer test_token`
                    }
                });

                const result = await response.json();
                document.getElementById('result').innerHTML = `
                    <h3>上传成功！</h3>
                    <p>图片URL: ${result.image_url}</p>
                    <img src="${result.image_url}" style="max-width: 300px;">
                `;
            } catch (error) {
                document.getElementById('result').innerHTML = `
                    <h3>上传失败</h3>
                    <p>${error.message}</p>
                `;
            }
        }
    </script>
</body>
</html>